<template>
  <div v-if="getCartList.length === 0">
    <van-empty
      class="custom-image"
      image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
      description="购物车是空的，赶快去挑选好货~"
    />
  </div>
  <div v-else class="cart-container">
    <!-- 商店信息 -->
    <div class="shop">
      <van-icon name="shop-o" />
      <span class="shop-name">嗨购商城</span>
    </div>
    <!-- 遍历渲染商品信息 -->
    <div>
      <div v-for="item in getCartList" :key="item.proid">
        <!-- 左边checkbox -->
        <!-- <van-checkbox
          class="checkbox"
          checked-color="#ee0a24"
          v-model="item.state"
        ></van-checkbox> -->
        <!-- $event就是内部你改变选中状态之后的值 -->
        <van-swipe-cell>
          <div class="goods-cell">
            <van-checkbox
              class="checkbox"
              v-model="item.state"
              @change="changeGoodsState({ proid: item.proid, state: $event })"
            ></van-checkbox>
            <!-- 右边是商品卡片 -->
            <van-card
              class="goods-card"
              :num="item.number"
              :price="item.price"
              :title="item.proname"
              :thumb="item.img"
            >
              <template #price>
                <span style="color: red; font-size: 15px">
                  ￥{{ item.price | formatPrice }}
                </span>
              </template>
              <template #num>
                <!-- $event代表change事件本身传递出来的参数 -->
                <van-stepper
                  v-model="item.number"
                  theme="round"
                  button-size="22"
                  :min="1"
                  disable-input
                  @change="
                    changeGoodsNumber({ proid: item.proid, number: $event })
                  "
                />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="deleteGoods(item.proid)"
            />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <van-submit-bar
      :price="getTotalAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
      :disabled="getTotalAmount === 0"
    >
      <!-- <van-checkbox v-model="isAllChecked" @change="selectAllOrNot($event)"
        >全选</van-checkbox
      > -->
      <!-- 方式1：把上面的双向数据绑定换成单向数据绑定，并且监听 click -->
      <!-- <van-checkbox :value="isAllChecked" @click="selectAllOrNot(!isAllChecked)"
        >全选</van-checkbox
      > -->
      <!-- 方式2：还是继续使用双向绑定 -->
      <van-checkbox v-model="allChecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapGetters('cart', ['getCartList', 'isAllChecked', 'getTotalAmount']),
    // 如果计算属性是获取值，则都是 getters
    // 如果要改变你绑定的计算属性的值，则需要实现 setter
    allChecked: {
      set (val) {
        this.selectAllOrNot(val)
      },
      get () {
        return this.isAllChecked
      }
    }
    // 单纯的写getter
    // allChecked () {
    //   return this.isAllChecked
    // }
  },
  methods: {
    ...mapMutations('cart', [
      'changeGoodsState',
      'changeGoodsNumber',
      'deleteGoods',
      'selectAllOrNot'
    ]),
    onSubmit () {
      console.log('---onSubmit---')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-empty__image {
  padding-top: 200px;
  width: 80px;
  height: 80px;
}
.cart-container {
  padding-bottom: 100px;
  overflow: auto;
  height: calc(100vh - 100px);

  .shop {
    background-color: white;
    border-bottom: 1px solid #edeeed;
    padding: 5px 10px;
    .shop-name {
      margin-left: 5px;
      font-size: 14px;
      color: #3f3f3f;
    }
  }
  .goods-cell {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #edeeed;
    height: 100%;
    align-items: center;
    .checkbox {
      width: 40px;
      height: 100%;
      line-height: 100%;
      justify-content: center;
    }

    .goods-card {
      flex: 1;
      margin: 0;
      background-color: white;
    }
  }

  .delete-button {
    height: 100%;
  }
  ::v-deep .van-submit-bar {
    background: hsla(0, 0%, 100%, 0.95);
    bottom: 50px;
  }
}
// 去除滚动条
.cart-container::-webkit-scrollbar {
  width: 0 !important;
}
</style>
